<template>
    <div class="flex flex-wrap justify-center">
        <el-button :text="!item.active" :type="item.active ? 'success' : ''" v-for="item, index in userList" :key="index"
            @click="changeUser(item)">{{
                item.realName }}</el-button>
    </div>

    <el-scrollbar class="h-full pt-2">
        <Waterfall :list="fileList" :gutter="10" :width="184" :hasAroundGutter="true" :breakpoints="breakpoints">
            <template #item="{ item, url, index }">
                <el-card class="w-46 p-0 m-0 cursor-pointer hover:translate-y-[-10px]" shadow="hover"
                    @click="playVideo(item)">
                    <img :src="url" width="300" height="300" />
                    <template #footer>
                        <div class="text-[#616161]">
                            Uniapp入门
                        </div>
                    </template>
                </el-card>
            </template>
        </Waterfall>
    </el-scrollbar>

    <el-dialog v-model="dialogVisible" width="50%" title="Uniapp入门" center align-center :close-on-click-modal="false"
        :destroy-on-close="true">
        <div class="flex justify-center">
            <video :src="dialogVideoUrl" :autoplay="true" controls></video>
        </div>
    </el-dialog>
</template>

<script setup>
import { Plus } from '@element-plus/icons-vue'
import { LazyImg, Waterfall } from 'vue-waterfall-plugin-next'
import 'vue-waterfall-plugin-next/dist/style.css'

import { albumPageApi } from '@/api/album.api'
import { userListApi } from '@/api/user.api'

const breakpoints = ref({
    1200: {
        rowPerView: 4,
    },
    900: {
        rowPerView: 3,
    },
    600: {
        rowPerView: 2,
    },
    350: {
        rowPerView: 1,
    },
})

const fileList = ref([
    {
        item: '1',
        src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
    },
    {
        item: '1',
        src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
    },
    {
        item: '1',
        src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
    },
    {
        item: '1',
        src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
    },
    {
        item: '1',
        src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
    },
    {
        item: '1',
        src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
    },
    {
        item: '1',
        src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
    },
    {
        item: '1',
        src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
    },
    {
        item: '1',
        src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
    },
    {
        item: '1',
        src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
    },
    {
        item: '1',
        src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
    },
    {
        item: '1',
        src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
    },
    {
        item: '1',
        src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
    }
])

const dialogVideoUrl = ref('')
const dialogVisible = ref(false)

const userList = ref([])
const cacheUser = ref({})

onMounted(() => {
    getUserPage()
})

const getUserPage = async () => {
    const res = await userListApi({
        page: 1,
        limit: 10
    })
    if (res.code === 0) {
        console.log(res.data.data.records)
        userList.value = res.data.data.records
        for (let i = 0; i < userList.value.length; i++) {
            userList.value[i].active = false
        }
        let all = {
            active: true,
            realName: '全部课程'
        }
        userList.value.unshift(all)
        cacheUser.value = all
    }
}

//选择用户名称
const changeUser = (item) => {
    cacheUser.value.active = false
    item.active = true
    cacheUser.value = item
}

const getVideoPage = async () => {
    const res = await userListApi({
        page: 1,
        limit: 10
    })
    if (res.code === 0) {
        console.log(res.data.data.records)
    }
}

const playVideo = (item) => {
    dialogVideoUrl.value = 'http://v6.huanqiucdn.cn/4394989evodtranscq1500012236/347080423270835014312487559/v.f100830.mp4'
    dialogVisible.value = true
}
</script>

<style scoped>
::v-deep .el-upload.el-upload--picture-card {
    display: none;
}

::v-deep .el-upload-list--picture-card {
    --el-upload-list-picture-card-size: 128px;
}

::v-deep .el-card__body {
    padding: 10px;
}

::v-deep .el-card__footer {
    padding: 10px;
}
</style>